import anim from '@dfeidao/atom-web/animation/anim';
import play from '@dfeidao/atom-web/animation/play';
import { IFeidaoAiBrowserComponent } from '@dfeidao/atom-web/interfaces';
import get_attr from '@dfeidao/atom-web/ui/get-attr';
import get_dom_by_id from '@dfeidao/atom-web/ui/get-dom-by-id';
import set_node_cls from '@dfeidao/atom-web/ui/set-node-cls';
import set_nodes_cls from '@dfeidao/atom-web/ui/set-nodes-cls';

export default async function a001(fd: IFeidaoAiBrowserComponent, e: { currentTarget: HTMLAnchorElement }) {
	// todo
	const node = e.currentTarget;
	const p_node = node.parentElement;
	const uls = Array.from(fd.data.node.querySelectorAll<HTMLLIElement>('.two'));
	const tiao = Array.from(fd.data.node.querySelectorAll<HTMLLIElement>('.tiao'));
	set_nodes_cls(tiao, 'openOne', false);
	uls.forEach((v) => {
		if (v.clientHeight) {
			Action(v, v.children.length * 30, 0, 'circle2 5s 2 linear forwards');
		}
	});
	get_attr(p_node, 'is_open');
	const ul = p_node.querySelector<HTMLUListElement>('.two');
	if (ul) {
		if (ul.clientHeight) {
			Action(ul, ul.children.length * 30, 0, 'circle2 5s 2 linear forwards');
		} else {
			Action(ul, 0, ul.children.length * 30, 'circle1 5s 2 linear forwards');
			set_node_cls(node, 'openOne', true);
		}
	}
}

function Action(node: HTMLSpanElement, start: number, end: number, animation: string) {
	play(anim(node, {
		repeat: 0,
		duration: 200,
		units: 'px',
		delay: 0,
		easing: 'ease',
		precent: 0
	}, {
			height: {
				start,
				end
			}
		}, {
			play: () => {
				const font = get_dom_by_id(node.parentElement, 'font');
				font.style['-webkit-animation'] = animation;
				// console.log(font, '1212121212', animation);

			}
		}));
}
